<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账号辅助</title>
    <script src="../lib/vue/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body,#app{
            width: 100%;
            height: 100%;
        }
        #app{
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }
        .box{
            display: flex;
            flex-direction: row;
            margin-top: 15px;
        }
        .action {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 10px;
            padding-right: 10px;
        }
        .action button{
            margin-bottom: 10px;
        }

        .auto_hidden{
            position:fixed;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            border-left: 1px solid #333;
            border-right: 1px solid #333;
            display:none;
            top: 30px;
            left: 10px;
            background: white;
            width: 100%;
        }
        .auto_onmouseover{
            color:#ffffff;
            background-color:highlight;
            width:100%;
        }
        .auto_onmouseout{
            color:#000000;
            width:100%;
            background-color:#ffffff;
        }

        .auto_show{
            display: block;

        }
    </style>
    <script>


        var $$ = function (id) {
            return "string" == typeof id ? document.getElementById(id) : id;
        }
        var Bind = function(object, fun) {
            return function() {
                return fun.apply(object, arguments);
            }
        }
        function AutoComplete(obj,autoObj,arr){
            this.obj=$$(obj);        //输入框
            this.autoObj=$$(autoObj);//DIV的根节点
            this.value_arr=arr;        //不要包含重复值
            this.index=-1;          //当前选中的DIV的索引
            this.search_value="";   //保存当前搜索的字符
        }
        AutoComplete.prototype={
            //初始化DIV的位置
            init: function(){
                // var e = $(this.autoObj);
                // this.autoObj.style.left = this.obj.offsetLeft + "px";
                // this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";
                // this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
            },
            //删除自动完成需要的所有DIV
            deleteDIV: function(){
                while(this.autoObj.hasChildNodes()){
                    this.autoObj.removeChild(this.autoObj.firstChild);
                }
                $(this.autoObj).removeClass("auto_show");
                // .className="auto_hidden";
            },
            //设置值
            setValue: function(_this){
                return function(){
                    _this.obj.value=this.seq;
                    $(_this.autoObj).removeClass("auto_show");

                    // _this.autoObj.className="auto_hidden";
                }
            },
            //模拟鼠标移动至DIV时，DIV高亮
            autoOnmouseover: function(_this,_div_index){
                return function(){
                    _this.index=_div_index;
                    var length = _this.autoObj.children.length;
                    for(var j=0;j<length;j++){
                        if(j!=_this.index ){
                            _this.autoObj.childNodes[j].className='auto_onmouseout';
                        }else{
                            _this.autoObj.childNodes[j].className='auto_onmouseover';
                        }
                    }
                }
            },
            //更改classname
            changeClassname: function(length){
                for(var i=0;i<length;i++){
                    if(i!=this.index ){
                        this.autoObj.childNodes[i].className='auto_onmouseout';
                    }else{
                        this.autoObj.childNodes[i].className='auto_onmouseover';
                        this.obj.value=this.autoObj.childNodes[i].seq;
                    }
                }
            }
            ,
            //响应键盘
            pressKey: function(event){
                var length = this.autoObj.children.length;
                //光标键"↓"
                if(event.keyCode==40){
                    ++this.index;
                    if(this.index>length){
                        this.index=0;
                    }else if(this.index==length){
                        this.obj.value=this.search_value;
                    }
                    this.changeClassname(length);
                }
                //光标键"↑"
                else if(event.keyCode==38){
                    this.index--;
                    if(this.index<-1){
                        this.index=length - 1;
                    }else if(this.index==-1){
                        this.obj.value=this.search_value;
                    }
                    this.changeClassname(length);
                }
                //回车键
                else if(event.keyCode==13){
                    $(this.autoObj).removeClass("auto_show")
                    this.index=-1;
                }else{
                    this.index=-1;
                }
            },
            //程序入口
            start: function(event){
                if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
                    this.init();
                    this.deleteDIV();
                    this.search_value=this.obj.value;
                    var valueArr=this.value_arr;
                    valueArr.sort();
                    if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
                    try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
                    catch (e){ return; }
                    var div_index=0;//记录创建的DIV的索引
                    for(var i=0;i<valueArr.length;i++){
                        if(reg.test(valueArr[i])){
                            var div = document.createElement("div");
                            div.className="auto_onmouseout";
                            div.seq=valueArr[i];
                            div.onclick=this.setValue(this);
                            div.onmouseover=this.autoOnmouseover(this,div_index);
                            div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
                            this.autoObj.appendChild(div);
                            $(this.autoObj).addClass("auto_show");
                            // className="auto_show";
                            div_index++;
                        }
                    }
                }
                this.pressKey(event);
                window.onresize=Bind(this,function(){this.init();});
            }
        }


    </script>
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../../../static/htmljs/store.js"></script>
    <script src="../lib/layer/layer.js"></script>
</head>
<body>
     <div id="app">
         <input type="text" id="search"  onkeyup="keyup()">
         <div class="box" style="flex: 1">
             <select size="20" style="flex: 1" v-model="curr">
                 <option :value="v" v-for="v in items" @dblclick="login()">{{v}}</option>
             </select>
             <div style="" class="action">
                 <button type="button" @click="remove()">删除</button>
             </div>
         </div>
     </div>
     <div class="auto_hidden" id="auto"></div>

</body>
</html>
<script>
    function keyup() {
        if(window.autoComplete){
            autoComplete.start(event)
        }
    }

    var all = [];
    var timer = null;

    var app = new Vue({
        el:"#app",
        data: {
            items : [],
            curr: "",
            inited: false
        },
        watch:{
            items: function (nv) {
                if(timer){
                    clearTimeout(timer);
                }
                var str = JSON.stringify(nv)
                timer = setTimeout(() => {
                    localStorage.setItem("support-tool-items", str);
                    timer = null;
                },500);
            }
        },
        methods:{
            login(){
                if(!this.curr){
                    return;
                }
                layer.load(2, {time:2000})
                $.get("/api/bpm/support/login", {username: this.curr.match(/\((.+?)\)/)[1]}, function (origin) {
                    layer.closeAll();
                    var keys = opener.document.cookie.match(/[^ =;]+(?=\=)/g);
                    if(keys) {
                        for(var i = keys.length; i--;)
                            opener.document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                    };
                    var user = origin.user;
                    console.log(user)
                    opener.$.cookie('userName', user.trueName);
                    opener.$.cookie('userId', user.id);
                    opener.$.cookie('authorization', origin.token);
                    opener.store.set("lastLogin", new Date().getTime());
                    opener.store.set("$user", user);
                    opener.store.set("token", origin.token);
                    opener.location.href = "/index3.html";
                },"json");
            },
            remove(){
                console.log(this.curr)
                var i = all.indexOf(this.curr);
                if(i == -1) return;
                this.items.splice(i, 1);
            }
        },
        mounted(){
            $("#search").focus();

            $.get("/api/bpm/support/ulist",  (msg) => {
                window.autoComplete=new AutoComplete('search','auto',all = msg || []);
            },"json")

            try{
                this.items = JSON.parse(localStorage.getItem("support-tool-items"));
            }catch (e) {

            }
            if(!this.items){
                this.items = [];
            }
            this.inited = true;
        },
        created(){
        }
    });

    $(document).on("change", "#search", function () {
        if(app){
            var val = $.trim(this.value);
            if(all.indexOf(val) > -1){
                app.items.push(this.value)
            }
            this.value = ""
        }
    });
</script>